<template>
  <vue-chart class="chart" :option="chartOption" autoresize />
</template>

<script>
export default {
  data() {
    return {
      chartOption: {
        series: [
          {
            type: 'wordCloud',
            shape: 'circle',
            left: 'center',
            top: 'center',
            width: '90%',
            height: '90%',
            right: null,
            bottom: null,
            sizeRange: [12, 60],
            rotationRange: [-90, 90],
            rotationStep: 45,
            gridSize: 8,
            drawOutOfBound: false,
            textStyle: {
              fontFamily: 'sans-serif',
              fontWeight: 'bold',
              color: function () {
                return (
                  'rgb(' +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                  ].join(',') +
                  ')'
                )
              }
            },
            emphasis: {
              focus: 'self',
              textStyle: {
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            data: [
              { name: '标题', value: 100 },
              { name: '标题2', value: 200 },
              { name: '标题3', value: 300 },
              { name: '标题4', value: 400 },
              { name: '标题5', value: 500 }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>
